import React, { Component } from 'react';
import '../App.less';
import {observer} from "mobx-react";
import  Mobx from  '../mobx'
import  axios from 'axios'
import { Toast } from 'antd-mobile';
import AvatarEditor from 'react-avatar-editor'
@observer class Personal extends Component {
    constructor(props) {
        super(props)
        this.state= {
            area: [],
            type:1,
            modify:{},
            show:'',
            test:'',
            areaSon:[],
            areaParentChoose:{},
            areaChildrenChoose:{},
            areaChooseShow:false,
            Address:'',
            qxChooseParent:'',
            qxChooseChildren:'',
            options:[
                "平面设计师",
                "插画师",
                "三维设计师",
                "网页设计师",
                "UI设计师",
                "动画师",
                "产品设计师",
                "室内设计师",
                "摄影师",
                "学生",
                "设计爱好者",
                "UX设计师",
                "新媒体设计师",
                "概念设计师",
                "特效合成师",
                "产品设计师",
                "建筑师",
                "服装设计师",
                "手工艺人",
                "艺术工作者",
                "教育工作者"
            ],
            image:'',
            show:false,
            blob:''
        }
    }
    componentDidMount(){
        axios.get('http://www.niuduxiu.com/mobile/receiver/area.jhtml')
            .then((item)=>{
                this.setState({
                    area:item.data.returnValue.areaList
                })
            })
        axios.get('http://www.niuduxiu.com/member/getmember.jhtml?id='+Mobx.zhanghao)
            .then((item)=>{
                this.setState({
                    Address:item.data.area
                })
            })
    }
    ShowChooseArea(){
        if(this.state.areaParentChoose.id){
            this.setState({
                areaChooseShow:true,
                qxChooseParent:{id:this.state.areaParentChoose.id,name:this.state.areaParentChoose.name},
                qxChooseChildren:{id:this.state.areaChildrenChoose.id,name:this.state.areaChildrenChoose.name}
            })
        }else if(this.state.modify.address){
            let array=[]
            this.state.area.map((item,index)=>{
                if(item.id==this.state.Address.parent.id){
                    array=item.childrens
                }
            })
            this.setState({
                areaParentChoose:{id:this.state.Address.parent.id,name:this.state.Address.parent.name},
                areaChildrenChoose:{id:this.state.Address.id,name:this.state.Address.name},
                areaSon:array,
                areaChooseShow:true
            },()=>{
                this.setState({
                    qxChooseParent:{id:this.state.areaParentChoose.id,name:this.state.areaParentChoose.name},
                    qxChooseChildren:{id:this.state.areaChildrenChoose.id,name:this.state.areaChildrenChoose.name}
                })
            })
        }else{
            this.setState({
                areaChooseShow:true
            })
        }
    }
    areaChildren(item){
        this.setState({
            areaSon:item.childrens,
            areaParentChoose:{id:item.id,name:item.name}
        })
    }
    areaSon(item){
        this.setState({
            areaChildrenChoose:{id:item.id,name:item.name}
        })
    }
    QX(){
        this.setState({
            areaParentChoose:this.state.qxChooseParent,
            areaChildrenChoose:this.state.qxChooseChildren,
            areaChooseShow:false
        })
    }
    OK(e){
        let pass=''
        this.state.areaSon.map((item,index)=>{
            if(item.id==this.state.areaChildrenChoose.id){
                pass=1
            }
        })
        if(!pass){
            Toast.fail('请选择2级分类', 1);
            return false
        }
        let modify=this.state.modify;
        modify['address']=this.state.areaParentChoose.name+''+this.state.areaChildrenChoose.name;
        this.setState({
            modify:modify,
            areaChooseShow:false,
            qxChooseParent:{id:this.state.areaParentChoose.id,name:this.state.areaParentChoose.name},
            qxChooseChildren:{id:this.state.areaChildrenChoose.id,name:this.state.areaChildrenChoose.name}
        })
    }
    changeUserName(e){
      let modify=this.state.modify;
      modify['username']=e.target.value;
      this.setState({
          modify:modify
      })
    }
    changeQQ(e){
        let modify=this.state.modify;
        modify['qq']=e.target.value;
        this.setState({
            modify:modify
        })
    }
    changeWechat(e){
        let modify=this.state.modify;
        modify['wechat']=e.target.value;
        this.setState({
            modify:modify
        })
    }
    changeChoose(){
        this.setState({
            modify:this.props.personal,
            type:2
        })
    }
    changeChoose2(){
      /*  this.setState({
            type:1
        })*/
      console.log(this.state.modify)
    }
    changeAge(item){
        let modify=this.state.modify;
        modify['gender']=item
        this.setState({
            modify:modify
        })
    }
    changeSelect(e){
        let modify=this.state.modify;
        modify['occupation']=e.target.value;
        this.setState({
            modify:modify
        })
    }
    setEditorRef = (editor) => this.editor = editor
    onClickSave = () => {
        if (this.editor) {
            const canvasScaled = this.editor.getImageScaledToCanvas().toDataURL()
            this.setState({
                image:canvasScaled,
                show:false,
                blob:this.dataURLtoBlob(canvasScaled)
            })
        }
    }
    dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type:mime});
    }
    changeFile(e){
        if(!e.target.files[0]){
            return false
        }
        this.setState({
            image:e.target.files[0],
            show:true
        })
    }
    changeChooseTrue(){
        var that=this
        var formData=new FormData();
        formData.append('headfile', this.state.blob);
        formData.append('qq',this.state.modify.qq)
        formData.append('wechat',this.state.modify.wechat)
        formData.append('city',this.state.qxChooseChildren.id)
        if(this.state.modify.gender=='男'){this.state.modify.gender='male'}else{this.state.modify.gender='female'}
        formData.append('sex',this.state.modify.gender)
        formData.append('occupation',this.state.modify.occupation)
        formData.append('username',this.state.modify.username)
        formData.append('id',Mobx.zhanghao)
        var xhr=new XMLHttpRequest();
        xhr.open("post","http://www.niuduxiu.com/member/update.jhtml");
        xhr.send(formData);
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4&&xhr.status==200)
            {
                that.props.Personal()
                that.setState({
                    type:1
                })
            }
        }
    }
    changeChooseFalse(){
        this.props.Personal()
        this.setState({
            type:1
        })
    }
    return(){
        this.props.return()
    }
    render(){
        return (
            <div className="Personal">
                <p className='return' onClick={this.return.bind(this)} style={{visibility:this.state.type==1?'':'none'}}>返回</p>
                <div className='check' style={{display:this.state.type==1?'block':'none'}}>
                    <div  className='img'>
                        <img src={this.props.personal.head_pic} alt=""/>
                    </div>
                    <p className='username'>
                        <span className='left'>用户名</span>
                        <span className='right'>{this.props.personal.username}</span>
                    </p>
                    <p className='username'>
                        <span className='left'>性别</span>
                        <span className='right'>{this.props.personal.gender}</span>
                    </p>
                    <p className='username'>
                        <span className='left'>现居</span>
                        <span className='right'>{this.props.personal.address}</span>
                    </p>
                    <p className='username'>
                        <span className='left'>身份</span>
                        <span className='right'>{this.props.personal.occupation}</span>
                    </p>
                    <p className='username'>
                        <span className='left'>QQ</span>
                        <span className='right'>{this.props.personal.qq}</span>
                    </p>
                    <p className='username'>
                        <span className='left'>微信</span>
                        <span className='right'>{this.props.personal.wechat}</span>
                    </p>
                    <button className='modify' onClick={this.changeChoose.bind(this)}>修改资料</button>
                </div>
                <div className='check' style={{display:this.state.type==2?'block':'none'}}>
                    <div  className='img'>
                        <img src={this.state.image||this.state.modify.head_pic} alt=""/>
                        <input type="file" onChange={this.changeFile.bind(this)}  className='Inputfile' />
                    </div>
                    <p className='username'>
                        <span className='left'>用户名</span>
                        <span className='right'>
                            <input type="text" value={this.state.modify.username}
                                   placeholder='请输入您要修改的用户名'
                                   onChange={this.changeUserName.bind(this)} />
                        </span>
                    </p>
                    <p className='username'>
                        <span className='left'>性别</span>
                        <span className='right'>
                           <button className={this.state.modify.gender=='女'?'active':''} onClick={this.changeAge.bind(this,'女')}>女</button>
                           <button className={this.state.modify.gender=='男'?'active':''} onClick={this.changeAge.bind(this,'男')}>男</button>
                        </span>
                    </p>
                    <p className='username'>
                        <span className='left'>现居</span>
                        <span className='right'>
                             <span className='right' onClick={this.ShowChooseArea.bind(this)}>{this.state.modify.address}</span>
                        </span>
                    </p>
                    <p className='username'>
                        <span className='left'>身份</span>
                        <select onChange={this.changeSelect.bind(this)} value={this.state.modify.occupation}>
                            {
                                this.state.options.map((item,index)=>{
                                    return(
                                        <option value={item} key={index} >{item}</option>
                                    )
                                 })
                            }

                        </select>
                    </p>
                    <p className='username'>
                        <span className='left'>QQ</span>
                        <span className='right'>
                            <input type="text" value={this.state.modify.qq}
                                   placeholder='请输入您要修改的qq号码'
                                   onChange={this.changeQQ.bind(this)} />
                        </span>
                    </p>
                    <p className='username'>
                        <span className='left'>微信</span>
                        <span className='right'>
                            <input type="text" value={this.state.modify.wechat}
                                   placeholder='请输入您要修改的微信'
                                   onChange={this.changeWechat.bind(this)} />
                        </span>
                    </p>
                    <div className='button'>
                        <button className='modifyTrue' onClick={this.changeChooseTrue.bind(this)}>修改资料</button>
                        <button className='modifyFalse' onClick={this.changeChooseFalse.bind(this)}>取消修改</button>
                    </div>
                </div>
                <div className='selectArea' style={{display:this.state.areaChooseShow===true?'block':'none'}}>
                    <div className='left'>
                    {
                        this.state.area.map((item,index)=>{
                            return(
                                <p key={index} onClick={this.areaChildren.bind(this,item)} className={this.state.areaParentChoose.id===item.id?'active':''}>
                                    {item.name}
                                </p>
                            )
                        })
                    }
                    </div>
                    <div className='right'>
                        {
                            this.state.areaSon.map((item,index)=>{
                                return(
                                    <p key={index} className={this.state.areaChildrenChoose.id===item.id?'active':''} onClick={this.areaSon.bind(this,item)}>
                                        {item.name}
                                    </p>
                                )
                            })
                        }
                    </div>
                    <div className='selectAreaButton'>
                        <button onClick={this.OK.bind(this)}>确认</button>
                        <button onClick={this.QX.bind(this)}>取消</button>
                    </div>
                    <div className='shuxian'></div>
                </div>
                <div className='modify1' style={{display:this.state.image&&this.state.show?"block":'none'}}>
                    <AvatarEditor
                        image={this.state.image||this.props.personal.head_pic}
                        width={200}
                        height={200}
                        border={50}
                        color={[255, 255, 255, 0.6]} // RGBA
                        scale={5}
                        rotate={0}
                        ref={this.setEditorRef}
                        className='canvas'
                    />
                    <button onClick={this.onClickSave.bind(this)}>保存</button>
                </div>
            </div>
        );
    }
}

export default Personal;
